import { View, Text, ScrollView, Image, useWindowDimensions, StyleSheet, TouchableOpacity } from 'react-native'
import React, { useEffect, useState } from 'react'
import { Stack, useLocalSearchParams, useSearchParams } from 'expo-router'
import { baseURL, mallGoodsDetails } from '../../service'
import { zhBorderColor, zhBorderRadiusBase, zhBorderWidth, zhSpacingColBase, zhSpacingColLg, zhSpacingRowBase, zhSpacingRowLg, zhThemeColor, zhThemeColorInverse, zhThemeGreyLight } from '../../global'
import { WebView } from 'react-native-webview';
import AutoHeightWebView from 'react-native-autoheight-webview'

export default function detail() {
  // 获取屏幕的宽度
  const {width} = useWindowDimensions()
  // 获取URL中查询字符串格式的参数
  const {gid} = useLocalSearchParams() // 推荐
  // const obj2 = useSearchParams() //不推荐
  // 状态变量，保存接口返回的这条数据
  const [obj,setObj] = useState({})

  // 页面挂载后，发送请求
  useEffect(() => {
    ;(async () => {
      const data = await mallGoodsDetails(gid)
      // 处理服务器返回的数据：给所有详情中的图片路径添加服务器地址
      // 查找字符串中 img/->https://www.codeboy.com/zhsqapi/img/
      data.details = data.details.replace(/img\//g,baseURL+'img/')
      // 处理服务器返回的数据：给所有详情中的图片添加样式，宽度为100%    <img  ->  <img style="width:100%"
      data.details = data.details.replace(/<img/g, '<img style="width:100%"')
      // console.log(data)
      setObj(data)
    })()
  }, [])

  return (
    // 滚动视图
    <ScrollView style={{height: '100%'}}>
      {/* 标题栏的内容是动态变化 */}
      {/* 会覆盖_layout.js中的设置 */}
      <Stack.Screen 
        options={{title: obj.shortTitle}} 
      />
      {/* F1: 顶部图片 */}
      <Image 
        source={{
          uri: baseURL + obj.mainPic
        }}
        style={{
          width,
          height: width
        }}
      />
      {/* F2: 标题 */}
      <Text style={ss.title}>{obj.goodsName}</Text>
      {/* F3: 二级标题 */}
      <Text style={ss.subTitle}>{obj.descriptions}</Text>
      {/* F4: 价格 */}
      <Text style={ss.price}>
        价格：<Text style={{textDecorationLine: obj.discount<1 ? 'line-through' : 'none'}}>￥{Number(obj.originalPrice).toFixed(2)}</Text>
      </Text>
      {/* F5: 促销价格 */}
      {obj.discount<1 && (
        <Text style={ss.discountPrice}>
          促销价格：
          <Text style={{color: '#F00'}}>
            ￥{(obj.originalPrice * obj.discount).toFixed(2)}
          </Text>
        </Text>
      )}
      {/* F6: 两个按钮 */}
      <View style={ss.btnGroup}>
        <TouchableOpacity activeOpacity={0.6}>
          <Text style={[ss.btn, ss.buy]}>立即购买</Text>
        </TouchableOpacity>
        <TouchableOpacity activeOpacity={0.6}>
          <Text style={[ss.btn, ss.add]}>添加到购物车</Text>
        </TouchableOpacity>
      </View>
      {/* F7: 详情 */}
      <Text style={ss.detail}>商品详情</Text>
      {/* <View>{obj.details}</View> */}
      {/* 嵌入一段HTML代码片段 */}
      {/* <WebView source={{ html: obj.details }} style={{ height: 2000, width }} /> */}
      {/* 嵌入一个HTML网页的地址 */}
      {/* <WebView 
        source={{uri: 'https://www.reactnative.cn/'}} 
        style={{ height: 300, width }}
      /> */}
      {/* 使用autoHeightWebView */}
      <AutoHeightWebView 
        source={{html: obj.details}} 
      />

      
    </ScrollView>
  )
}

const ss = StyleSheet.create({
  title: {
    fontSize: 15,
    marginHorizontal: zhSpacingRowBase,
    marginVertical: zhSpacingColLg
  },
  subTitle: {
    fontSize: 13,
    marginHorizontal: zhSpacingRowBase,
    color: zhThemeGreyLight
  },
  price: {
    marginHorizontal: zhSpacingRowBase,
    marginVertical: zhSpacingColBase
  },
  discountPrice: {
    marginHorizontal: zhSpacingRowBase
  },
  btnGroup: {
    flexDirection: 'row',
    marginHorizontal: zhSpacingRowBase,
    marginTop: zhSpacingColBase
  },
  btn: {
    paddingHorizontal: zhSpacingRowLg * 2,
    paddingVertical: zhSpacingColBase,
    borderWidth: 1,
    borderColor: zhThemeColor,
    borderRadius: zhBorderRadiusBase
  },
  buy: {
    backgroundColor: '#CFC',
    color: zhThemeColor,
    marginRight: zhSpacingRowLg
  },
  add: {
    backgroundColor: zhThemeColor,
    color: zhThemeColorInverse
  },
  detail: {
    paddingVertical: zhSpacingColBase,
    marginHorizontal: zhSpacingRowBase,
    borderBottomColor: zhBorderColor,
    borderBottomWidth: zhBorderWidth,
    marginTop: zhSpacingColBase
  }
})